<script>
import axios from "axios";

export default {
  name: 'ShowCenter',
  data() {
    return {
      weather_list: [],
      city: '北京'
    }
  },
  methods: {
    get_weather() {
      console.log('showCenter token:::', this.$store.getters.token)
      // axios.get(this.$settings.host, {params: {city: this.city}}).then((response) => {
      //   console.log(response.data)
      //   this.weather_list = response.data.data.forecast;
      // })
    }
  },
  mounted() {
    this.get_weather()
  }
}
</script>

<template>
  <h3>展示中心</h3>

  <a-row>
    <a-col :span="6" :offset="9">
      <a-input-search
          v-model:value="city"
          placeholder="城市 默认北京"
          enter-button="Search"
          size="large"
          @search="get_weather"
      />
    </a-col>
  </a-row>
  <p></p>

  <table v-if="weather_list.lenth>1">
    <tr>
      <th>日期</th>
      <th>天气</th>
      <th>温度</th>
    </tr>
    <tr v-for="weather in weather_list">
      <td>{{ weather.date }}</td>
      <td>{{ weather.type }}</td>
      <td>{{ weather.low }} ~ {{ weather.low }}</td>
    </tr>
  </table>
</template>

<style scoped>
table {
  width: 800px;
  border-collapse: collapse;
}

td，th {
  border: 1px solid red;
}
</style>